<script setup>
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted } from 'vue'

const props = defineProps({
  item: Object
})

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])

onMounted(() => {
  const chartDom = document.getElementById(props.item.id)
  const myChart = echarts.init(chartDom)

  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(30,30,60,0.9)',
      borderColor: '#00ffff',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: props.item.seriesName,
        type: 'pie',
        radius: ['48%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 12,
          borderColor: 'rgba(255,255,255,0.1)',
          borderWidth: 3,
          shadowBlur: 20,
          shadowColor: 'rgba(0, 255, 255, 0.3)'
        },
        color: [
          {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              { offset: 0, color: '#00f0ff' },
              { offset: 1, color: '#0040ff' }
            ]
          },
          {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              { offset: 0, color: '#ff6f00' },
              { offset: 1, color: '#ff0058' }
            ]
          }
        ],
        label: {
          show: true,
          color: '#eee',
          fontSize: 14
        },
        emphasis: {
          scale: true,
          scaleSize: 12,
          itemStyle: {
            shadowBlur: 30,
            shadowColor: 'rgba(255,255,255,0.6)'
          }
        },
        labelLine: {
          show: true,
          lineStyle: {
            color: '#aaa'
          }
        },
        data: props.item.data
      }
    ]
  }

  myChart.setOption(option)
  window.addEventListener('resize', () => myChart.resize())
})
</script>

<template>
  <transition name="fade-in-up">
    <el-card class="neon-card">
      <template #header>
        <div class="card-header">
          <span class="title">{{ props.item.header }}</span>
          <router-link :to="{ path: '/' + props.item.id.toLowerCase() + '/list' }">
            <span class="count">{{ props.item.total }}</span>
          </router-link>
        </div>
      </template>
      <div class="charts" :id="props.item.id"></div>
    </el-card>
  </transition>
</template>

<style lang="less" scoped>
.neon-card {
  width: 500px;
  height: 420px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center, #dcdce1 0%, #222223 100%);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
  border: 1px solid rgba(0, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  animation: pulse 3s infinite;
  color: #fff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #8be9fd;
  }

  .count {
    font-size: 26px;
    font-weight: bold;
    color: #00ffff;
    transition: 0.3s;
  }

  .count:hover {
    color: #00bfff;
    text-shadow: 0 0 6px #00ffff;
  }
}

.charts {
  width: 100%;
  height: 320px;
  animation: fadeIn 1.2s ease-out;
}

.fade-in-up-enter-active {
  animation: fadeInUp 0.6s ease;
}
.fade-in-up-leave-active {
  animation: fadeOutDown 0.4s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.35);
  }
}
@keyframes fadeIn {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
</style>
